<template>
	<div>
		<div class="coupon" v-for="coupon in coupondata" :key="coupon.face_value" @click="addcoupon(coupon.id)">
			<div class="left">
				<template v-if="coupon.face_type == '0'">
					<div class="typename">代金券</div>
					<div class="price">￥<span>{{coupon.face_value}}</span></div>
				</template>
				<template v-else>
					<div class="typename">折扣券</div>
					<div class="price"><span>{{coupon.face_value}}</span>折</div>
				</template>
			</div>
			<div class="name">{{coupon.name}}</div>
			<div class="mk">使用门槛:{{coupon.doorsill == '0' ? '无限制' : '满'+coupon.doorsill+'元可用'}}</div>
			<template v-if="coupon.time_type == '0'">
				<div class="mk">{{coupon.start_time.substring(0,10)}}至{{coupon.end_time.substring(0,10)}}有效</div>
			</template>
			<template v-else-if="coupon.time_type == '1'">
				<div class="mk">自领卡之日起{{coupon.valid_day}}天有效</div>
			</template>
			<template v-else>
				<div class="mk">永久有效</div>
			</template>
			<div class="xz">
				{{coupon.select_goods == '1' ? '指定商品' : '全部商品'}}
				{{coupon.is_original_price == 'yes' ? '(仅原价商品可用)' : ''}}
			</div>
			<div class="button">
				点击领取
			</div>
		</div>
	</div>
</template>

<script>

	import { mapState, mapGetters } from 'vuex';
	export default {
		components:{

		},
		data(){
			return {

			}
		},
		methods : {
			addcoupon(id){
				this.$http.member.post('/coupon/send',{
					send : [{
						vip_id : this.userid,
						coupon_id : id,
						number : "1"
					}],
					instructions : '手动领取'
				}).then(res => {
					if(!res.data.code){
						this.$vux.toast.show({
							text: '领取成功'
						})
					}else{
						this.$vux.toast.show({
							text: res.data.message,
							type : 'warn'
						})
					}
				})
          .catch(err =>{
            this.$message({
              message: '登陆过期，请重新登陆！',
              type: 'error'
            });
            localStorage.removeItem('user');
            localStorage.removeItem('company');
            localStorage.removeItem('api_token');
            localStorage.removeItem('refresh_token');
            location.reload()
          })
			}
		},
		computed : {
			...mapState('user',[
				'userid',
				'allcoupon'
			]),
			coupondata(){
				return this.$store.getters['user/getuservouchercoupon']
			}
		}
	}
</script>



<style lang="less" scoped>

	.coupon{
		box-shadow: 0px 0px 5px 1px #999;
		margin:10px;
		font-size: 12px;
		padding:5px;
		height:90px;
		background: rgba(255,239,187,1);
		position: relative;
		padding-left: 110px;
		font-family : '微软雅黑';
		* {position: relative; z-index: 2;}
		.left{
			position: absolute;
			left:0; top:0;
			height: 80px; width: 80px;
			background: rgba(217,55,44,1);
			color: #fff;
			padding:10px;
			.typename{font-size: 14px;}
			.price{
				font-size: 16px;
				span{ font-family: Arial, Helvetica, sans-serif; font-size: 30px; display: inline-block; min-width: 50px; text-align: center}
			}
			background-image:-webkit-gradient(linear,0 50%,50% 0,from(transparent), color-stop(.5,transparent),color-stop(.5,rgba(255,239,187,1)),to(rgba(255,239,187,1))),
					-webkit-gradient(linear,0 0,100% 100%,from(transparent), color-stop(.5,transparent),color-stop(.5,rgba(255,239,187,1)),to(rgba(255,239,187,1)));
			background-size:8px 8px;
			background-repeat:repeat-y;
			background-position:100% 0;
		}

		.name{
			font-size: 14px;
			span{font-size: 12px; color: #F56C6C}
		 }
		.mk{ color:#949494; }
		.xz{ position: absolute;left: 110px;bottom: 5px; color: #606266}
		.button{
			position: absolute;
			right: 8px; top: 5px;
			height: 60px;
			width:60px;
			padding:15px;
			font-size: 28px;
			line-height: 30px;
			transform: rotate(30deg);
			border:1px dashed #c0b07a;
			border-radius: 50%;
			color: #c0b07a;
			z-index: 1;
		}
	}
	.coupon:before{content: '';position: absolute;right:-8px;top:50%; margin-top: -10px; background: #fbf9fe;height: 20px; width: 20px;border-radius: 50%;

		box-shadow: 2px 0px 1px 0px #999 inset;
	}
	.coupon:after{content: '';position: absolute;left:-8px;top:50%; margin-top: -10px;background: #fbf9fe;height: 20px; width: 20px;border-radius: 50%;
		box-shadow: -2px 0px 1px 0px #999 inset;
	}

</style>
